import React, { useState, memo } from 'react';
import { EditableProTable } from '@ant-design/pro-table';
import ProField from '@ant-design/pro-field';
import ProCard from '@ant-design/pro-card';
import { Button } from 'antd';


export default memo(({ columns, value, onChange, rowKey, maxLength }) => {

  return (
    <EditableProTable
      maxLength={maxLength ?? 30}
      columns={columns??[]}
      rowKey={rowKey??"id"}
      value={value ?? []}
      onChange={onChange}
      recordCreatorProps={{
        newRecordType: 'dataSource',
        record: () => ({
          [rowKey]: Date.now(),
        }),
      }}
      editable={{
        type: 'multiple',
        editableKeys: value ? value.map((item) => item[rowKey]) : [],
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
      }}
    />
  );
})